<template>
  <m-page>
    <!-- 还款申请 -->
    <m-header title="电子合同"></m-header>
    <div class="g-list">
      <ul>
        <li>
          <div>
            <span>借款金额</span>
          </div>
          <div>
            <span>90.000元</span>
          </div>
        </li>
        <li>
          <div>
            <span>借据编号</span>
          </div>
          <div>
            <span>9234234234</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 付款账户 -->
    <div class="g-payaccount">
      <div>
        <span>付款账户</span>
      </div>
      <div>
        <span>长沙银行储蓄卡（8888）</span>
        <ynet-icon name="arrow-right" size="lg"></ynet-icon>
      </div>
    </div>
    <!-- 还款金额 -->
    <div class="g-money">
      <ynet-field title="还款金额">
        <ynet-input-item
          ref="input14"
          v-model="value"
          type="money"
          placeholder="请输入还款金额"
          size="middle"
          is-amount
          clearable
          brief="剩余应还40,000.00元，可全部还款或部分还款"
        >
          <ynet-icon name="rmb" size="lg" svg slot="left"></ynet-icon>
        </ynet-input-item>
      </ynet-field>
    </div>
    <!-- 按钮 -->
    <div class="g-button">
      <ynet-button type="warning" inactive>确定还款</ynet-button>
    </div>
    <!-- 温馨提示 -->
    <div class="g-tip">
      <p>
        <b>温馨提示：</b><br>
        目前还款金额只能从付款账户中扣取，请确保账户余额充足
      </p>
    </div>
  </m-page>
</template>

<script>
import { Button, Field, InputItem, NumberKeyboard, Icon } from "ynet-mobile";
export default {
  components: {
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Field.name]: Field,
    [InputItem.name]: InputItem,
    [NumberKeyboard.name]: NumberKeyboard
  },
  data() {
    return {
      value: "",
      inactive: false
    };
  },
  created() {},
  methods: {
    handClick() {
      // 返回上一个页面
      app.api.pushWindow();
    }
  },
  mounted() {},
  watch: {},
  computed: {
    size() {
      return this.value.length > 10 ? "small" : "large";
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
